<template>
    <div class="shangpin" style="margin-left: 20px">
        <div  style="float: left;margin-left: 20px;margin-bottom: 20px">
            <el-radio-group v-model="radio1" @input="goodsStatusChange">
                <el-radio-button label="全部商品"></el-radio-button>
                <el-radio-button label="上架中"></el-radio-button>
                <el-radio-button label="已下架"></el-radio-button>
            </el-radio-group>
        </div>
        <div style="float: left;margin-left: 20px;margin-bottom: 20px" >
            商品名称 <el-input v-model="searchInput" style="width: 200px;margin-left: 20px"></el-input>
        </div>
        <div style="float: left;margin-left: 20px;margin-bottom: 20px">
            所属门店 <el-input v-model="searchShopInput" style="width: 200px;margin-left: 20px"></el-input>
        </div>
        <div style="margin-left: 20px;margin-bottom: 20px;clear: both">
            发布日期 <el-date-picker
                    v-model="riQi"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="margin: 0 100px 20px 20px;">
            </el-date-picker>
            <el-button type="primary" @click="search" style="margin-bottom: 20px">搜索</el-button>
        </div>

        <div class="content" style="margin-left: 20px">
            <el-table
                    :data="allGoods.list"
                    border
                    style="width: 1200px"
                    :header-cell-style="{color: '#ffffff',fontSize: '14px', backgroundColor: '#1890FF'}">
                <el-table-column
                        fixed
                        prop="goodsId"
                        label="商品ID"
                        width="150"
                        align = "center">
                </el-table-column>
                <el-table-column
                        prop="goodsName"
                        label="商品名"
                        width="180"
                        align = "center">
                </el-table-column>
                <el-table-column
                        prop="goodsShopName"
                        label="所属门店"
                        width="120"
                        align = "center">
                </el-table-column>
                <el-table-column
                        prop="goodsSalesVolume"
                        label="销量"
                        width="120"
                        align = "center">
                </el-table-column>
                <el-table-column
                        prop="goodsPresentPrice"
                        label="预估价"
                        width="120"
                        align = "center">
                </el-table-column>
                <el-table-column
                        prop="addTime"
                        label="发布时间"
                        width="260"
                        align = "center">
                </el-table-column>
                <el-table-column
                        prop="goodsStatus"
                        label="状态"
                        width="120"
                        align = "center">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100"
                        align = "center">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.goodsStatus === '已下架'" @click="ShangJiaClick(scope.row)" type="text" size="small">上架</el-button>
                        <el-button v-else @click="XiaJiaClick(scope.row)" type="text" size="small">下架</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <div class="block">
            <el-pagination
                    @current-change="handlePageChange"
                    :current-page="currentPage"
                    layout="prev, pager, next"
                    :page-size=pageSize
                    :total=totalItems
                    style="margin: 15px 20px">
            </el-pagination>
        </div>
    </div>

</template>

<script>
    export default {
        name: "ShangpinComponent",
        data:function () {
         return{
             riQi:"",
             allGoods:{},
             radio1:"全部商品",
             list:[],
             searchInput:"",
             searchShopInput:"",
             currentPage: 1, // 当前页码
             totalItems: 0, // 总数据条数
             pageSize: 10, // 每页大小
             goodsname:"", //商品名称
             shopname:"", //门店名称
             oldtime:"",
             newtime:"",

         }
        },
        created() {//默认请求全部商品
            this.getStartORend();
            this.goodsStatusChange();
        },
        methods:{
            //获取页面信息
            //将状态改为上架或下架
            getStartORend(){
                if (this.riQi.length!=0) {
                    //时间转字符串
                    this.oldtime = this.riQi[0].getFullYear()+"-"+ (this.riQi[0].getMonth() + 1) +"-"+ this.riQi[0].getDate() + " 00:00:00";
                    this.newtime = this.riQi[1].getFullYear()+"-"+ (this.riQi[1].getMonth() + 1) +"-"+ (this.riQi[1].getDate()+1) + " 00:00:00";
                }
                if (this.riQi.length == 0) {
                    this.oldtime = "";
                    this.newtime = "";
                }
            },
            goodsStatusChange(){
                // console.log(this.radio1);
                //设置商品状态 全部商品为 ""  已上架 "1"  已下架  "0"
                let status = "";
                switch (this.radio1) {
                    case "上架中":
                        status = "1"
                        break;
                    case "已下架":
                        status = "0"
                        break;
                }
                this.axios.request("/goods/querySearchShopGoodsList", {params:{
                        pageNum:this.currentPage,
                        pageSize:10,
                        goodsName:this.searchInput,
                        goodsStatus:status,
                        shopName:this.searchShopInput,
                        startTime:this.oldtime,
                        endTime:this.newtime,
                    }}).then((res)=>{
                    this.allGoods = res.data.data;
                    this.list = this.allGoods.list;
                    this.totalItems = this.allGoods.total;
                    this.panduan();
                }).catch((err)=>{})

            },
            panduan(){
                for (let i = 0; i<this.list.length; i++){
                    switch (this.list[i].goodsStatus) {
                        case 0:
                            this.list[i].goodsStatus = "已下架"
                            // this.isShangORXia = true;
                            break;
                        case 1:
                            this.list[i].goodsStatus = "上架中"
                            // this.isShangORXia = false;
                            break;
                    }
                }
            },
            //点击 上架  按钮操作
            ShangJiaClick(obj){
                //点击按钮 传值是当前此行对象
                console.log(obj)
                this.axios.post("/goods/modifyShopGoods",{
                    goodsId: obj.goodsId,
                    goodsStatus:1,
                }).then((res)=>{
                   this.goodsStatusChange();

                })
            },
            //点击 下架  按钮操作
            XiaJiaClick(obj){
                console.log(obj)
                this.axios.post("/goods/modifyShopGoods",{
                    goodsId: obj.goodsId,
                    goodsStatus:0,
                }).then((res)=>{
                    this.goodsStatusChange();
                })
            },
            search(){
                if (this.riQi === null) {
                    this.riQi = "";
                }
                this.getStartORend();
                this.goodsStatusChange();
                console.log(this.riQi)
            },

            //分页
            handlePageChange(newPage) {
                // 页码变化时，重新加载对应页的数据
                this.currentPage = newPage;
                this.goodsStatusChange();
            },

        },
    }
</script>

<style scoped>
.shangpin{
    /*height: 300px;*/
    /*background-color: skyblue;*/
}
</style>